<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui" >
<body>
    <h:form id="formPasosProyecto">
        
        <h:panelGrid columns="1" cellpadding="0" cellspacing="0" border="0" style="border-spacing: 0px;">
                
            <p:commandLink id="btn0" actionListener="#{pasosView.navegacionPasos('0')}" >
                <div style="font-size: 15px; color:#FFFFFF; background-image: url(../images/botonesFlujo/icon1.jpg); width:80px; height:60px; padding-top:0px; padding-left:0px;">
                </div>
            </p:commandLink>
            <p:commandLink id="btn1" actionListener="#{pasosView.navegacionPasos('1')}" >
                <div style="font-size: 30px; color:#FFFFFF; background-image: url(../images/botonesFlujo/icon2.jpg); width:80px; height:60px; padding-top:0px; padding-left:0px;">
                </div>
            </p:commandLink>
            <p:commandLink id="btn2" actionListener="#{pasosView.navegacionPasos('2')}" >
                <div style="font-size: 30px; color:#FFFFFF; background-image: url(../images/botonesFlujo/icon3.jpg); width:80px; height:60px; padding-top:0px; padding-left:0px;">
                </div>
            </p:commandLink>
            <p:commandLink id="btn3" actionListener="#{pasosView.navegacionPasos('3')}" >
                <div style="font-size: 30px; color:#FFFFFF; background-image: url(../images/botonesFlujo/icon4.jpg); width:80px; height:60px; padding-top:0px; padding-left:0px;">
                </div>
            </p:commandLink>
            <p:commandLink id="btn4" actionListener="#{pasosView.navegacionPasos('4')}" >
                <div style="font-size: 30px; color:#FFFFFF; background-image: url(../images/botonesFlujo/icon5.jpg); width:80px; height:60px; padding-top:0px; padding-left:0px;">
                </div>
            </p:commandLink>
            <p:commandLink id="btn5" actionListener="#{pasosView.navegacionPasos('5')}" >
                <div style="font-size: 30px; color:#FFFFFF; background-image: url(../images/botonesFlujo/icon6.jpg); width:80px; height:60px; padding-top:0px; padding-left:0px;">
                </div>
            </p:commandLink>
            <p:commandLink id="btn6" actionListener="#{pasosView.navegacionPasos('6')}" >
                <div style="font-size: 30px; color:#FFFFFF; background-image: url(../images/botonesFlujo/icon7.jpg); background-color:#773C08; width:80px; height:60px; padding-top:0px; padding-left:0px;">
                </div>
            </p:commandLink>
            <p:commandLink id="btn7" actionListener="#{pasosView.navegacionPasos('7')}" >
                <div style="font-size: 30px; color:#FFFFFF; background-image: url(../images/botonesFlujo/icon8.jpg); width:80px; height:60px; padding-top:0px; padding-left:0px;">
                </div>
            </p:commandLink>
            
            <p:tooltip for="btn0" trackMouse="true" value="0. Regresar a la bandeja principal" />
            <p:tooltip for="btn1" trackMouse="true" value="1. Registra los parametros, relaciones y participantes" />
            <p:tooltip for="btn2" trackMouse="true" value="2. Monitoreo de carga de redes" />
            <p:tooltip for="btn3" trackMouse="true" value="3. Crear cuestionarios" />
            <p:tooltip for="btn4" trackMouse="true" value="4. Relaciona los cuestionarios con los evaluados" />
            <p:tooltip for="btn5" trackMouse="true" value="5. Redactar mensajería" />
            <p:tooltip for="btn6" trackMouse="true" value="6. Seguimiento de la ejecución" />
            <p:tooltip for="btn7" trackMouse="true" value="7. Generar reportes del proyecto" />

        </h:panelGrid>
    </h:form> 
</body>
</html>